<template>
  <div class="bottom-container">
    <!-- 左侧卡片 -->
    <el-card style="flex: 1" shadow="hover">
      <!-- 卡片头 -->
      <template #header>
        <h4>关键词搜索</h4>
      </template>

      <!-- 卡片中 -->
      <template #default>
        <!-- 图表 -->
        <div class="charts">
          <v-chart :option="optionsLeft"></v-chart>
          <v-chart :option="optionsRight"></v-chart>
        </div>
        <!-- 表格 -->
        <div class="table">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column width="60" prop="rank" label="排名" />
            <el-table-column align="center" prop="keyWord" label="关键词" />
            <el-table-column align="center" prop="totalSearch" label="总搜索量" />
            <el-table-column align="center" prop="totalUser" label="搜索用户数" />
          </el-table>
          <!-- 分页 -->
          <div class="pagination">
            <button @click="prevPage" :disabled="currentPage === 1"><</button>

            <button v-for="item in btnNums" :key="item" :class="{ selected: currentPage === item }" @click="changePage(item)">
              {{ item }}
            </button>
            <button @click="nextPage" :disabled="currentPage === btnNums">></button>
          </div>
        </div>
      </template>
    </el-card>
    <!-- 右侧卡片 -->
    <el-card style="flex: 1" shadow="hover">
      <!-- 卡片头 -->
      <template #header>
        <div class="nav">
          <h4>分类销售排行</h4>
          <el-radio-group v-model="radio" size="small" @change="changeRadio">
            <el-radio-button label="品类" value="category" />
            <el-radio-button label="商品" value="product" />
          </el-radio-group>
        </div>
      </template>

      <!-- 卡片中 -->
      <template #default>
        <div class="chart-pie">
          <!-- 饼图 -->
          <v-chart :option="optionsPie"></v-chart>
        </div>
      </template>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';

import axios from 'axios';

//左侧卡片左右折线图//////////////////////////////
//搜索用户量
const totalList = ref([]);
//左侧折线图
const optionsLeft = ref({
  title: {
    text: '搜索用户量',
    top: 0,
    left: 0,
    textStyle: {
      color: '#666',
      fontSize: 12,
      fontWeight: 500,
    },
    //副标题
    subtext: '',
    subtextStyle: {
      color: '#000',
      fontSize: 14,
      fontWeight: 600,
    },
  },

  xAxis: {
    type: 'category',
    show: false,
    boundaryGap: false,
  },
  yAxis: {
    type: 'value',
    show: false,
  },
  grid: {
    top: 40,
    left: 0,
    right: 0,
    bottom: 0,
  },
  series: [
    {
      data: [],
      type: 'line',
      showSymbol: false,
      smooth: true,
      lineStyle: {
        color: '#5470C6',
      },
      areaStyle: {
        color: '#ABDDF1',
      },
    },
  ],
});
//右侧折线图
const optionsRight = ref({
  title: {
    text: '搜索量',
    top: 0,
    left: 0,
    textStyle: {
      color: '#666',
      fontSize: 12,
      fontWeight: 500,
    },
    //副标题
    subtext: '',
    subtextStyle: {
      color: '#000',
      fontSize: 14,
      fontWeight: 600,
    },
  },

  xAxis: {
    type: 'category',
    show: false,
    boundaryGap: false,
  },
  yAxis: {
    type: 'value',
    show: false,
  },
  grid: {
    top: 40,
    left: 0,
    right: 0,
    bottom: 0,
  },
  series: [
    {
      data: [],
      type: 'line',
      showSymbol: false,
      smooth: true,
      lineStyle: {
        color: '#5470C6',
      },
      areaStyle: {
        color: '#ABDDF1',
      },
    },
  ],
});
//左侧卡片列表数据//////////////////////////////
//固定每页只显示6条数据
const tableList = ref([]);
const tableData = ref([]);
//按钮数量 = 列表数据长度/6向上取整
const btnNums = ref(1);
const currentPage = ref(1);
//切换列表事件
const changePage = (page) => {
  currentPage.value = page;
  tableData.value = tableList.value.slice((page - 1) * 6, page * 6);
};

//翻页事件
const prevPage = () => {
  currentPage.value--;
  tableData.value = tableList.value.slice((currentPage.value - 1) * 6, currentPage.value * 6);
};

const nextPage = () => {
  currentPage.value++;
  tableData.value = tableList.value.slice((currentPage.value - 1) * 6, currentPage.value * 6);
};

//右侧卡片导航栏按钮//////////////////////////////
const radio = ref('category');

//切换按钮事件
const changeRadio = (val) => {
  radio.value = val;
  //切换按钮事件
  if (val === 'category') {
    optionsPie.value.title.text = '累计订单量';
    changeData(seriesData.value.data1);
  } else {
    optionsPie.value.title.text = '累计销售额';
    changeData(seriesData.value.data2);
  }
};

//封装函数
function changeData(data) {
  currentSeriesData.value = data;
  optionsPie.value.series[0].data = data;
  optionsPie.value.legend.data = data.map((item) => item.name);
  optionsPie.value.title.subtext = data.reduce((total, num) => total + num.value, 0);
}

//右侧卡片饼图数据//////////////////////////////
const seriesData = ref([]);
const currentSeriesData = ref([]);

const optionsPie = ref({
  title: {
    text: '累计订单量',
    left: 'center',
    top: '45%',
    itemGap: 15,
    textStyle: {
      color: '#999',
      fontSize: 14,
      fontWeight: 600,
    },

    subtext: [],
    subtextStyle: {
      color: '#000',
      fontSize: 28,
      fontWeight: 500,
      height: 30,
    },
  },
  tooltip: {
    trigger: 'item',
    formatter: function (params) {
      //圆点被覆盖需要手动添加圆点
      const dot = `<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${params.color};margin-right:5px;"></span>`;
      // params包含当前扇区数据，返回两行文本
      return `${dot}${params.name} <br /> ${dot}销售额：${params.value}`;
    },
  },
  legend: {
    orient: 'vertical',
    top: 5,
    right: 10,
    itemGap: 10,
    data: [],

    // 自定义图例文本：名称|数值
    formatter: function (name) {
      // 遍历series数据，找到当前名称对应的数值
      const target = currentSeriesData.value.find((item) => item.name === name);
      return `${name}|${target.value}`; // 拼接格式：名称|数值
    },
  },
  series: [
    {
      name: '品类分布',
      type: 'pie',
      radius: ['40%', '50%'],
      padAngle: 5,
      data: [],
    },
  ],
  graphic: [
    {
      type: 'text', // 文本类型
      left: 30,
      top: 30,
      style: {
        text: '品类分布',
        fontSize: 14,
        fontWeight: 'bold',
        fill: '#666', // 文字颜色
      },
    },
  ],
});

//获取后端数据-左侧卡片//////////////////////////////
axios.get('http://project.x-zd.net:3001/apis/keyworddata').then((val) => {
  const res = val.data;
  //左侧卡片折线图列表副标题
  optionsLeft.value.title.subtext = res.reduce((total, num) => total + num.totalUser, 0);
  optionsRight.value.title.subtext = res.reduce((total, num) => total + num.totalSearch, 0);
  //左侧卡片折线图数据
  totalList.value = res.slice(0, 10).reverse(); //前十个数据取反
  optionsLeft.value.series[0].data = totalList.value.map((item) => item.totalUser);
  optionsRight.value.series[0].data = totalList.value.map((item) => item.totalSearch);
  //左侧卡片列表数据
  tableList.value = res;
  btnNums.value = Math.ceil(tableList.value.length / 6);
  tableData.value = tableList.value.slice(0, 6);
});

//获取后端数据-右侧卡片//////////////////////////////
axios.get('http://project.x-zd.net:3001/apis/categorydata').then((res) => {
  //将title属性名修改成name 大坑!
  seriesData.value.data1 = res.data.data1.map((item) => ({
    name: item.title,
    value: item.value,
  }));
  seriesData.value.data2 = res.data.data2.map((item) => ({
    name: item.title,
    value: item.value,
  }));

  //初始化 默认显示data1的数据
  changeData(seriesData.value.data1);
});
</script>

<style lang="scss" scoped>
.bottom-container {
  display: flex;
  justify-content: space-between;
  gap: 20px;

  padding: 10px;
  width: 1200px;
  height: 580px;
}

.charts {
  display: flex;
  justify-content: space-between;
  gap: 20px;

  padding: 10px 0;
  width: 540px;
  height: 120px;
}

.pagination {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 10px;

  margin-top: 20px;
  button {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 2px;
    background-color: #f4f4f5;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    &:hover:not(.selected) {
      color: #409eff;
    }
  }
  .selected {
    background-color: #409eff;
    color: #fff;
  }
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-pie {
  width: 540px;
  height: 540px;
}
</style>
